<template>
    <n-scrollbar style="max-height: 100vh">
        <!-- 整个页面外层container -->
        <div class="header">
            <h3 color="#174CAD" f-c-c text-28 font-bold>
                <img src="@/assets/images/logo-name.png" height="35" class="mr-10" />
                龙腾
            </h3>
            <n-button type="primary" size="small" @click="showLogin = true">登录</n-button>
        </div>
        <div style="width: 100%; background-color: #EEF2F9;">
            <!-- 测试标题 -->
            <n-carousel autoplay draggable style="width: 100%" dot-type="line" dot-placement="bottom">
                <n-carousel-item style="width: 100%;">
                    <div class="main-content" style="background: linear-gradient(to right, #ECF3FF, #EDF3FF)">
                        <div class="left-content">
                            <n-text class="special-title">做跨境，用龙腾ERP</n-text>
                            <n-text class="title">风险全维管理</n-text>
                            <n-text class="intro">促销 | 库存 | 财务 | 广告等异常提前预警</n-text>
                            <div class="containerInputBtn">
                                <n-input  class="inputTel" size="large" type="text" placeholder="输入你的手机号码" v-model:value="phone" clearable></n-input>
                                <n-button class="registerBtn" type="primary" text-white size="large" @click="showRegister = true">立即注册</n-button>
                            </div>
                        </div>
                        <div class="right-content">
                            <img style="height: 75%; margin-left: 55%" src="~@/assets/images/slider-pic1.png" alt="">
                        </div>
                    </div>
                </n-carousel-item>
                <n-carousel-item style="width: 100%">
                    <div class="main-content" style="background: linear-gradient(to right, #E1E8FE, #B5CBFF)">
                        <div class="left-content">
                            <n-text class="special-title">做跨境，用龙腾ERP</n-text>
                            <n-text class="title">高效运营工具</n-text>
                            <n-text class="intro">进销存一体管理 | 售后客服管理 | 财务精准管理</n-text>
                            <div class="containerInputBtn">
                                <n-input  class="inputTel" size="large" type="text" placeholder="输入你的手机号码" v-model:value="phone" clearable></n-input>
                                <n-button class="registerBtn" type="primary" text-white size="large" @click="showRegister = true">立即注册</n-button>
                            </div>
                        </div>
                        <div class="right-content">
                            <img style="height: 75%; margin-left: 60%" src="~@/assets/images/slider-pic2.png" alt="">
                        </div>
                    </div>
                </n-carousel-item>
                <n-carousel-item style="width: 100%;">
                    <div class="main-content" style="background: linear-gradient(to right, #DEF6FF, #B4E2FF)">
                        <div class="left-content">
                            <n-text class="special-title">做跨境，用龙腾ERP</n-text>
                            <n-text class="title">多维度数据报表</n-text>
                            <n-text class="intro">高效 | 便捷</n-text>
                            <div class="containerInputBtn">
                                <n-input  class="inputTel" size="large" type="text" placeholder="输入你的手机号码" v-model:value="phone" clearable></n-input>
                                <n-button class="registerBtn" type="primary" text-white size="large" @click="showRegister = true">立即注册</n-button>
                            </div>
                        </div>
                        <div class="right-content">
                            <img style="width: 85%; margin-left: 20%" src="~@/assets/images/slider-pic3.png" alt="">
                        </div>
                    </div>
                </n-carousel-item>
            </n-carousel>
            <div class="main-content-second">
                <ul class="data-show">
                    <li class="data-li">
                        <img class="data-img" src="~@/assets/images/enterprise.png" alt=""/>
                        <div class="data-content">
                            <span class="data-number">20+</span>
                            <span>服务企业</span>
                        </div>
                    </li>
                    <li class="data-li">
                        <img class="data-img" src="~@/assets/images/user.png" alt=""/>
                        <div class="data-content">
                            <span class="data-number">4000+</span>
                            <span>用户总数</span>
                        </div>
                    </li>
                    <li class="data-li">
                        <img class="data-img" src="~@/assets/images/test.png" alt=""/>
                        <div class="data-content">
                            <span class="data-number">10+</span>
                            <span>跨境产品模块</span>
                        </div>
                    </li>
                    <li class="data-li">
                        <img class="data-img" src="~@/assets/images/test-person.png" alt=""/>
                        <div class="data-content">
                            <span class="data-number">5000+</span>
                            <span>累计使用人次</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="slogan">
                <span>为什么选择龙腾</span>
                <span style="rgba(92,94,102,var(--tw-text-opacity)); font-weight: 300; font-size: .875rem; margin-top: 15px;">选择龙腾即选择了精细化管理的模式，全面赋能实现业务增长</span>
                <i class="blue-border"></i>
            </div>
            <div class="main-content-fourth">
                <div class="card-style">
                    <img class="card-img" src="~@/assets/images/thumb.png"/>
                    <span class="card-title">全生态产品</span>
                    <span class="card-detail">贴合跨境卖家核心使用场景</span>
                </div>
                <div class="card-style">
                    <img class="card-img" src="~@/assets/images/security.png"/>
                    <span class="card-title">全方位保障</span>
                    <span class="card-detail">深度开发能力与数据安全护航</span>
                </div>
                <div class="card-style">
                    <img class="card-img" src="~@/assets/images/service.png"/>
                    <span class="card-title">全周期服务</span>
                    <span class="card-detail">全程专业服务，满足卖家需求</span>
                </div>
            </div>
            <div style="width: 100%; background-color: #F6F8FA; margin-top: 100px;">
                <div class="slogan">
                    <span>核心功能</span>
                    <i class="blue-border"></i>
                </div>
                <div class="main-content-third">
                    <div class="list-pic">
                        <img style="width: 80%; height: 100%" src="~@/assets/images/list-pic1.png">
                    </div>
                    <div class="item-content">
                        <span class="item-id">01</span>
                        <span class="item-title">进销存一体管理</span>
                        <ul class="list-description">
                            <li style="margin-top: 10px;"><span class="list-course">采购业务</span> | 可按产品/供应商/采购员等维度管理采购</li>
                            <li style="margin-top: 10px;"><span class="list-course">物流追踪</span> | 全链条跟踪物流轨迹，优化物流成本</li>
                            <li style="margin-top: 10px;"><span class="list-course">补货建议</span> | 多物流渠道计算，提供连续补货计划，提前做好资金规划</li>
                            <li style="margin-top: 10px;"><span class="list-course">库存管理</span> | 统一管理本地仓/海外仓/FBA仓库存和在途库存</li>
                        </ul>
                        <div style="margin-top: 40px;">
                            <n-button size="large" type="primary" @click="showLogin = true">免费试用</n-button>
                            <n-button size="large" style="margin-left: 30px;  border: 1px solid #3776FF; color: #3776FF;"  @click="showLogin = true">了解详情</n-button>
                        </div>
                    </div>
                </div>
                <div class="main-content-third">
                    <div class="item-content">
                        <span class="item-id">02</span>
                        <span class="item-title">财务精准管理</span>
                        <ul class="list-description">
                            <li style="margin-top: 10px;"><span class="list-course">实时利润</span> | 精准核算利润，实时整合提供利润报表</li>
                            <li style="margin-top: 10px;"><span class="list-course">成本控制</span> | 业务成本一目了然，隐形费用自动识别，精准统计所有成本</li>
                            <li style="margin-top: 10px;"><span class="list-course">资金追踪</span> | 自动跟踪每一笔订单的回款</li>
                            <li style="margin-top: 10px;"><span class="list-course">财务审批</span> | 资金请求可回溯历史，核算有据可依</li>
                        </ul>
                        <div style="margin-top: 40px;">
                            <n-button size="large" type="primary" @click="showLogin = true">免费试用</n-button>
                            <n-button size="large" style="margin-left: 30px;  border: 1px solid #3776FF; color: #3776FF;"  @click="showLogin = true">了解详情</n-button>
                        </div>
                    </div>
                    <div class="list-pic">
                        <img style="width: 80%; height: 100%;" src="~@/assets/images/list-pic2.png">
                    </div>
                </div>
                <div class="main-content-third">
                    <div class="list-pic">
                        <img style="width: 80%; height: 100%;" src="~@/assets/images/list-pic3.png">
                    </div>
                    <div class="item-content">
                        <span class="item-id">03</span>
                        <span class="item-title">多维度数据报表</span>
                        <ul class="list-description">
                            <li style="margin-top: 10px;"><span class="list-course">数据看板</span> | 数据一目了然，便于了解核心数据快速决策</li>
                            <li style="margin-top: 10px;"><span class="list-course">多维报表</span> | 提供“人、财、货”相关数据报表，了解人员、货物、财务表现</li>
                            <li style="margin-top: 10px;"><span class="list-course">随时导出</span> | 订单数据支持导出，轻松实现数据核算</li>
                            <li style="margin-top: 10px;"><span class="list-course">数据分析</span> | 数据环比趋势分析与展示，且可下载按需分析数据</li>
                        </ul>
                        <div style="margin-top: 40px;">
                            <n-button size="large" type="primary" @click="showLogin = true">免费试用</n-button>
                            <n-button size="large" style="margin-left: 30px;  border: 1px solid #3776FF; color: #3776FF;"  @click="showLogin = true">了解详情</n-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <AppFooter mt-15 />
        <LoginForm
            :login="api.login"
            success-path="/admin"
            :show-close-icon="false"
            title="龙腾"
            :show="showLogin"
            @closeModal="handleClose"
        />
        <RegisterForm
            :phone="phone"
            :show-close-icon="false"
            title="龙腾"
            :show="showRegister"
            @closeModal="handleClose"
        />
    </n-scrollbar>
</template>
<script setup>
import AppFooter from "@/components/common/AppFooter.vue";
import LoginForm from "@/components/LoginForm.vue";
import api from '@/api/admin';
import RegisterForm from "@/components/RegisterForm.vue";
const showLogin = ref(false)
const showRegister = ref(false)
const phone = ref("")
const handleClose = () => {
    showLogin.value = false;
    showRegister.value = false;
};
onMounted(()=>{
})
</script>
<style scoped>
.card-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    color: #27274a;
    margin-bottom: 8px;
}
.card-detail {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #27274a;
}
.card-img {
    width: 35%;
}
.card-style {
    width: 28%;
    height: 100%;
    align-items: center;
    background: linear-gradient(214deg,#f8f9ff 0%, #fbfcff 100%, #fcfcff 100%);
    border: 2px solid #ffffff;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    color: #27274a;
    margin-bottom: 8px;
    justify-content: center;
}
.card-style:hover{
    cursor: pointer;
    transform:translateY(-10px);
    box-shadow: 3px 11px 20px 0px rgba(113,150,251,0.20);
    transition: all 1s ease;
}
.main-content-fourth {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-top: 50px;
}
.data-number {
    font-size: 32px;
    font-weight: 700;
    font-family: Helvetica, Helvetica-Bold;
    color: #3776ff;
    line-height: 32px;
    margin-bottom: 5px;
    width: 150px;
}
.data-img {
    width: 60%;
    height: 55%;
}
.data-li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.data-show {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 105px;
}
.data-content {
    margin-left: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.item-id {
    font-size: 34px;
    font-family: Helvetica, Helvetica-Bold;
    font-weight: 700;
    color: #3776ff;
    line-height: 34px;
    margin-bottom: 20px;
}

.item-title {
    line-height: 34px;
    margin-bottom: 20px;
    font-family: Helvetica, Helvetica-Bold;
    font-size: 34px;
    font-weight: 700;
    color: #27274a;
    display: inline-block;
}

.item-content {
    display: flex;
    flex-direction: column;
    width: 45%;
    padding-left: 20px;
}

.list-pic {
    width: 55%;
}

.list-course {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    line-height: 24px;
    color: #27274a;
    margin-bottom: 10px;
}

.list-description {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    line-height: 24px;
    color: #6d717c;
    margin-bottom: 10px;
}

.slogan {
    margin-bottom: 60px;
    padding-top: 80px;
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    color: #27274a;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.blue-border {
    width: 50px;
    height: 6px;
    display: inline-block;
    vertical-align: middle;
    background: linear-gradient(162deg,#3776ff 0%, #1238f5 100%);
    border-radius: 16px;
    margin-top: 4px;
}
.title {
    font-size: 48px;
    color: #27274A;
    font-weight: 900;
    white-space: nowrap;
    margin-bottom: 20px;
}
.special-title {
    font-size: 24px;
    color: #27274A;
    line-height: 33px;
    margin-bottom: 5px;
    font-weight: 900;
}
.intro {
    font-size: 18px;
    color: #27274A;
    line-height: 27px;
    margin-bottom: 60px;
    font-weight: 500;
}
.containerInputBtn {
    display: flex;
    flex-direction: row;
    width: 500px;
    height: 60px;
}

.registerBtn {
    height: 100%;
    margin-left: -1px; /* 负值 */
    outline: none; /* 去除鼠标悬停效果 */
    border-radius: 0 20px 20px 0;
}

.inputTel {
    height: 100%;
    line-height: 60px;
    border-radius: 20px 0 0 20px;
    float: left;
    padding: 0;
    margin: 0;
    outline: none;
}

.main-content {
    display: flex;
    flex-direction: row;
    height: 500px;
    padding-left: 30px;
}

.main-content-third {
    display: flex;
    flex-direction: row;
    height: 400px;
    padding-left: 100px;
}

.main-content-second {
    display: flex;
    flex-direction: row;
    height: 200px;
    padding-left: 100px;
    padding-right: 100px;
}

.left-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-size: cover;
    margin-left: 4%;
}
.right-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.img-show {
    width: 100%;
}
#indexTitle {
    font-size: 25px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 40px;
    color: #4e627a;
}
#index-content {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 350px;
}
.index-left-div {
    width: 495px;
    height: 273px;
    float: left;
}
.index-left-div img {
    border-radius: 5px;
}
.index-right-div {
    margin-left: 80px;
    font-size: 18px;
    height: 273px;
    float: left;
}
.index-right-div p {
    color: #4e627a;
}
.index-right-line1 {
    padding-top: 70px;
}
.index-right-line2 {
    padding-top: 20px;
}
.index-right-line3 {
    padding-top: 20px;
}
.index-right-div a {
    color: rgb(30, 208, 225);
}


.header {
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity));
    height: 3.75rem;
    padding-left: 75px;
    padding-right: 75px;
    position: sticky;
    top: 0;
    z-index: 80;
    box-shadow: 0 3px 10px 0 rgb(180 189 221 / 25%);
    transition: top .2s ease;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 40px; /* 设置Logo图片的高度 */
    width: auto; /* 保持图片的原始宽高比 */
}
</style>